<template>
    <div>
        <h3 class="box-title">收货地址</h3>
        <div class="address">
            <div class="text">
                <div v-if="!showAddress" class="none">您需要先添加收货地址才可提交订单。</div>
                <ul v-else>
                    <li><span>收<i/>货<i/>人：</span>{{showAddress.receiver}}</li>
                    <li><span>联系方式：</span>{{showAddress.contact}}</li>
                    <li><span>收货地址：</span>{{showAddress.fullLocation.replace(/ /g,'')+showAddress.address}}</li>
                </ul>
                <a href="javascript:;" v-if="showAddress" @click="openAddressEdit(showAddress)">修改地址</a>
            </div>
            <div class="action">
                <el-button style="width: 140px;height: 46px" @click="$refs.addressSelect.open()">切换地址</el-button>
                <el-button style="width: 140px;height: 46px" @click="openAddressEdit({})">添加地址</el-button>
            </div>
        </div>

        <AddressEdit ref="addressEditCom" @on-success="successHandler"/>
        <AddressSelect ref="addressSelect" :list="list" @confirmAddress="confirmAddressFn"/>
    </div>
</template>

<script>
    import AddressEdit from "@/views/member/pay/components/address-edit";
    import AddressSelect from "@/views/member/pay/components/address-select";

    export default {
        name: "Address",
        components: {AddressSelect, AddressEdit},
        props: {
            list: {
                default: () => [],
                type: Array
            }
        },
        data() {
            return {}
        },

        methods: {
            openAddressEdit(address) {
                this.$refs.addressEditCom.open(address)
            },
            //修改、添加地址成功
            successHandler(formData) {
                const address = this.list.find(item => item.id === formData.id)

                if (address) {
                    for (const key in address) {
                        address[key] = formData[key]
                    }

                } else {
                    // 如果是添加：往list中追加一条
                    // 当你在修改formData的时候，数组中的数据也会更新，因为是同一引用地址。
                    // 啥时候修改formData，当你打开对话框需要清空之前的输入信息
                    // 克隆formData数据
                    const jsonStr = JSON.stringify(formData)
                    // eslint-disable-next-line vue/no-mutating-props
                    this.list.unshift(JSON.parse(jsonStr))
                }
                console.log(this.list)
            },
            //修改默认地址
            confirmAddressFn(address) {
                this.list.forEach(item => {
                    if (item.id === address.id) {
                        item.isDefault = 1
                    } else {
                        item.isDefault = 0
                    }
                })
            }
        },
        computed: {
            showAddress() {
                if (this.list && this.list.length) {
                    let defaultAddress = this.list.find(item => item.isDefault === 1)
                    if (!defaultAddress) {
                        defaultAddress = this.list[0]
                    }
                    this.$emit('change', defaultAddress.id)
                    return defaultAddress
                }
                this.$emit('change', null)
                return null
            }
        }
    }
</script>

<style scoped lang="less">
    .box-title {
        font-size: 16px;
        font-weight: normal;
        padding-left: 10px;
        line-height: 70px;
        border-bottom: 1px solid #f5f5f5;
    }

    .address {
        margin-top: 20px;
        border: 1px solid #f5f5f5;
        display: flex;
        align-items: center;

        .text {
            flex: 1;
            min-height: 90px;
            display: flex;
            align-items: center;

            .none {
                line-height: 90px;
                color: #999;
                text-align: center;
                width: 100%;
            }

            > ul {
                flex: 1;
                padding: 20px;

                li {
                    line-height: 30px;

                    span {
                        color: #999;
                        margin-right: 5px;

                        > i {
                            width: 0.5em;
                            display: inline-block;
                        }
                    }
                }
            }

            > a {
                color: @xtxColor;
                width: 160px;
                text-align: center;
                height: 90px;
                line-height: 90px;
                border-right: 1px solid #f5f5f5;
            }
        }

        .action {
            width: 420px;
            text-align: center;
        }
    }

</style>